<div class="dynamic_table " *ngIf="models">
  <div class="table_header">
    <div class="tr">
      <div class="th {{header.cssClass||''}}" *ngFor="let header of config.table" title="{{header.description}}" [ngStyle]="{width: header.calculatedWidth}">{{header.title}}</div>
    </div>
  </div>
  <div class="table_body">
      <ng-container *ngFor="let model of models|search:config.search;let i = index">
        <div class="tr" [ngClass]="{'selected':model.selected}">
            <div class="td {{table_element.cssClass||''}}" *ngFor="let table_element of config.table;let k = index" [ngStyle]="{width: table_element.calculatedWidth}">
                <span *ngIf="table_element.type === 'index'">{{i+(config.filter.offset || 0)+1}}.</span>
                <div *ngIf="table_element.type === 'buttons'" (mouseenter)="tMousEnter()" (mouseleave)="tMousLeave()">
                    <a (click)="$event.preventDefault();button.click(model)" *ngFor="let button of table_element.buttons" [title]="button.title || ''">
                        <div *ngIf="button.icon.tag === 'span'" class="{{button.icon.cssClass||''}}">{{button.icon.text||''}}</div>
                    </a>
                </div>
                <span [ngClass]="{'pointer':table_element.onClick}" *ngIf="table_element.type === 'progress'">
                    <stacked-progress [model]="_.get(model,table_element.key)" [diffModel]="table_element.diffMode" (click)="onProgressClicked(table_element, model)"></stacked-progress>
                </span>
                <ng-container *ngIf="table_element.type === 'model'">
                    <ng-container *ngIf="table_element.modifyData">
                        <span *ngIf="_.hasIn(model,table_element.key)">{{table_element.modifyData(_.get(model,table_element.key),model)}}</span>
                    </ng-container>
                    <ng-container *ngIf="!table_element.modifyData">
                        <span *ngIf="_.hasIn(model,table_element.key)" class="text_content" tooltip="{{_.get(model,table_element.key)}}">
                            {{_.get(model,table_element.key)}}
                        </span>
                    </ng-container>
                </ng-container>
                <ng-container *ngIf="table_element.type === 'value'">
                    <ng-container *ngIf="table_element.modifyData">
                        <span *ngIf="_.hasIn(model,table_element.pathToValue)">{{table_element.modifyData(_.get(model,table_element.pathToValue),model)}}</span>
                    </ng-container>
                    <ng-container *ngIf="!table_element.modifyData">
                        <span *ngIf="_.hasIn(model,table_element.pathToValue)" class="text_content" tooltip="{{_.get(model,table_element.pathToValue)}}">
                            {{_.get(model,table_element.pathToValue)}}
                        </span>
                    </ng-container>
                </ng-container>
                <ng-container *ngIf="table_element.type === 'actions'">
                    <ng-container  *ngFor="let action of table_element.actions">
                        <a *ngIf="(!action.showIf || action.showIf(model, config))" class="pointer dicom_table_buttons" (click)="$event.preventDefault();action.click(model)">
                            <span *ngIf="action.icon.tag === 'span' && (!action.icon.showIf || action.icon.showIf(model))" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</span>
                            <i *ngIf="action.icon.tag === 'i' && (!action.icon.showIf || action.icon.showIf(model))" class="{{action.icon.cssClass||''}}">{{action.icon.text||''}}</i>
                        </a>
                    </ng-container>
                </ng-container>
            </div>
        </div>
        <div class="tr"  *ngIf="model.showAttributes">
            <div class="td" style="width:100%">
              <table class="table table-bordered table-condensed attribute_list">
                  <ng-container *ngIf="stringifyDetailAttributes">
                      <tr *ngFor="let key of Object.keys(model.tableGeneratorDetailAttributes)">
                          <th [innerHtml]="key"></th>
                          <td [innerHtml]="model.tableGeneratorDetailAttributes[key]"></td>
                      </tr>
                  </ng-container>
                  <ng-container *ngIf="!stringifyDetailAttributes">
                      <tr *ngFor="let key of Object.keys(model)">
                          <th [innerHtml]="key"></th>
                          <td *ngIf="key === 'createdTime' || key === 'updatedTime' || key === 'scheduledTime' || key === 'processingStartTime' || key === 'processingEndTime';else nodate_content" [innerHtml]="model[key] | date:'yyyy-MM-dd HH:mm:ss'"></td>
                          <ng-template #nodate_content>
                              <td [innerHtml]="model[key]"></td>
                          </ng-template>
                      </tr>
                  </ng-container>
              </table>
            </div>
        </div>
          <div class="tr"  *ngIf="model.showDicomAttributes">
              <div class="td" style="width:100%">
                  <attribute-list *ngIf="model" [attrs]="model"></attribute-list>
              </div>
          </div>
      </ng-container>
  </div>
</div>
